<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p></p>
    <p></p>
    <div>
        <ol>
            <li>1</li>
            <li class="li2">1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ol>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <span style="display: none;">隐藏的显示了</span>
        <section>一会我就消失了</section>
    </div>
    
    <!-- 1.设置获取元素
    2.设置样式
    3.网络请求 -->
    <script>
        // 入口函数
        // $ 代表jq对象
        $(function(){
            // 获取元素
            // $('p')
            // $('.text')
            // $(css选择器)
            console.log($('p'));

            // 在jq中之前所有的属性都是方法
            // 写入内容 
            $('p').html('666')
            $('p').text('text')
            // 设置样式
            $('p').css('color','red')
            $('p').css({
                color:'yellow',
                backgroundColor:'red',
                fontSize:'25px'
            })
            // 类名操作
            $('p').addClass('p1')
            $('p').addClass('p2')


            $('p').removeClass('p2')
            // 属性操作
            $('p').attr('data-id','6')
            console.log($('p').attr('data-id'));

            // 获取子元素
           console.log( $('div').children('ol'));
           console.log( $('div').find('li'));

        //    获取兄弟元素
        $('.li2').siblings('li').css('background','red')
        // 获取父元素
       console.log( $('.li2').parent());
    //    eq:指定下标的元素
       console.log($('li').eq(4),'4');
            // 创建元素
            $('<p></p>')
            // 插入元素
            $('div').append($('<p>div pp</p>'))
            // 移除元素
            $('div p').remove()
            // 事件）
            $('div').click(function(params) {
                console.log('点击事件');   
                // 隐藏
                $('section').hide()
                console.log(this);
                console.log($(this));
                
                

            })
            $('div').on('click',function(){
                console.log('点击事件222');
                // 显示
                $('div span').show()
            })
       
       
            
           


            
            

        })

    </script>
</body>
</html>